<!-- Data.vue -->
<template>
    <div class="wrapper">
        <all-header></all-header>
        <div class="container">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <!--第一个-->
                <div class="panel panel-danger">
                    <div class="panel-heading " role="tab" id="head-1">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="fa fa-paper-plane-o"></i>
                                三国威力加强版
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <div class="table-box">
                                <table class="table table-bordered" id="data">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>日期</th>
                                            <th>充值金额</th>
                                            <th>注册设备</th>
                                            <th>注册账号</th>
                                            <th>登陆账号</th>
                                            <th>登陆付费率</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for = "(todo, index) in todos">
                                            <td>{{ index+1 }}</td>
                                            <td>{{ todo.date }}</td>
                                            <td>{{ todo.money }}</td>
                                            <td>{{ todo.dele }}</td>
                                            <td>{{ todo.reg }}</td>
                                            <td>{{ todo.log }}</td>
                                            <td>{{ todo.payrate }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <all-footer></all-footer>
    </div>
</template>
<style>
    .wrapper{
        margin-top: 60px;
    }
    .table-box{
        overflow-x: scroll;
    }
</style>
<script>
import AllHeader from '../components/common/AllHeader'
import allFooter from '../components/common/AllFooter'
    export default {
        data(){
            return{
                todos:[]
            }
        },
        components: {
            AllHeader,
            allFooter
        },
        created(){
          this.$http.get('/api/todos').then((data)=>{
            this.todos = data.body.data;
          })
        }
    }
</script>
